<template>
  <div class="bulletinContainer" id="bulletinHomeContainer">
    <el-row class="bulletinRow">
      <el-col class="bulletinElement" :span="9" >
        <class-management></class-management>
      </el-col>
      <el-col class="bulletinElement" :span="15">
        <!-- 图片中的通知栏 -->
        <div class="bulletinBg">
          <div class="bulletin">
            <notice-column></notice-column>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="bulletinRow" style="margin-top: 1.0vh">
      <el-col class="bulletinElement" :span="6">
        <shift-management></shift-management>
      </el-col>
      <el-col class="bulletinElement" :span="6">
        <wind-field-graph></wind-field-graph>
      </el-col>
      <el-col class="bulletinElement" :span="6">
        <security-column></security-column>
      </el-col>
      <el-col class="bulletinElement" :span="6">
        <staff-demeanor></staff-demeanor>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import securityColumn from '@/views/bulletinBoard/src/home/components/securityColumn'
import classManagement from '@/views/bulletinBoard/src/home/components/classManagement'
import staffDemeanor from './components/staffDemeanor'
import noticeColumn from '@/views/bulletinBoard/src/home/components/noticeColumn'
import windFieldGraph from '@/views/bulletinBoard/src/home/components/windFieldGraph'
import shiftManagement from './components/shiftManagement'
export default {
  name: 'index',
  components: {
    noticeColumn,
    classManagement,
    staffDemeanor,
    windFieldGraph,
    securityColumn,
    shiftManagement
  },
  data () {
    return {
      calendarArr: {
        type: 'combination',
        headStyle: {
          todayBtn: 'center',
          combination: 'center',
          checkBtn: 'center'
        },
        viewStyle: {
          day: 'center'
        },
        calendarData: []
      }
    }
  },
  created () {
  },
  mounted () {
    const container = document.getElementById('bulletinHomeContainer')
    const deviceWidth = Number(document.documentElement.clientWidth)
    const deviceHeight = Number(document.documentElement.clientHeight)
    container.style.width = deviceWidth / deviceWidth * 94.5 + 'vw' // 数字是页面布局宽度差值
    container.style.height = deviceHeight / deviceHeight * 91 + 'vh' // 数字是页面布局高度差
  },
  methods: {
  }
}
</script>

<style scoped>
  .bulletinContainer {
  }
  .bulletinRow {
    width: 100%;
    height: 49%;
    display: flex;
  }
  .bulletinElement {
    padding: 0.04vh 0.3vw;
  }
  /* 首页背景图片 */
  .carousel {
    height: 100%;
  }
  >>> .el-carousel__container {
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .bulletinBg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url("../../../../assets/img/6.jpg");
    animation:frams 40s infinite;
  }
  @keyframes frams {
    0%{
      background-image: url("../../../../assets/img/6.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
    20%{
      background-image: url("../../../../assets/img/7.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
    40%{
      background-image: url("../../../../assets/img/8.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
    60%{
      background-image: url("../../../../assets/img/9.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
    80%{
      background-image: url("../../../../assets/img/10.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
    100%{
      background-image: url("../../../../assets/img/11.jpg");background-size: 100% 100%;background-repeat: no-repeat
    }
  }
  /* 安全专栏 */
  #security_Column {
    width: 95%;
    height: 100%;
    overflow: auto;
  }
  #security_Column ul li {
    font-size: 10px;
  }
  .bulletin {
    width: 38%;
    height: 100%;
    /*background-color: #000000;*/
    opacity: 0.8;
    float: right;
  }
</style>
